<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {})

const { title, subClass, tag } = defineProps({
  title: {
    type: String,
    default: () => {
      return '新闻学'
    },
  },
  subClass: {
    type: String,
    default: () => {
      return '本科'
    },
  },
  tag: {
    type: String,
    default: () => {
      return '文学 新闻传播'
    },
  },
})

const change = (e) => {
  console.log(e)
}

const infoList = ref<Array<object>>([
  { title: '专业年限', value: '四年' },
  {
    title: '授予学位',
    value: '学士学位',
  },
  { title: '男女比例', value: '66：34' },
  { title: '文理比例', value: '85：15' },
])
</script>

<template>
  <gui-page
    ref="guipage"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-primary-text">根据专业定选科</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop></template>
    <template #gBody>
      <view class="wh100p flex-column bgf5f5f5" style="flex: 1; padding: 10rpx; box-sizing: border-box; font-size: 28rpx">
        <view id="myheader" class="gui-dark-bg-level-3" style="height: 220rpx">
          <view class="wh100p flex-column flex-center" style="padding: 20rpx; box-sizing: border-box">
            <view class="subject-head">
              <view class="flex">
                <text class="subject-title">{{ title }}</text>
              </view>
            </view>
            <view class="flex subject-tag" style="color: #537bb6; font-weight: 600">
              <text class="subject-class">{{ subClass }}</text>
              |
              <text class="subject-class-first">{{ tag }}</text>
            </view>
          </view>
        </view>
        <view class="w100p bgfff flex-column" style="padding: 25rpx; box-sizing: border-box">
          <view class="flex">
            <text>首选科目</text>
            <text class="font11 gui-color-gray">（2选1）</text>
          </view>
          <view class="flex" style="padding: 0 10rpx; box-sizing: border-box">
            <gui-stags
              :checked-class="['gui-bg-primary', 'gui-dark-bg', 'gui-color-white', 'text-center']"
              class="mt10"
              :default-class="['text-center', 'gui-bg-gray', 'gui-dark-bg-level-1', 'gui-primary-text', 'gui-dark-text-level-5']"
              :line-height="3"
              :padding="20"
              :size="24"
              :tags="[
                { text: '物理', id: '0' },
                { text: '历史', id: '1' },
              ]"
              :width="100"
            />
          </view>
          <view class="flex">
            <text>次选科目</text>
            <text class="font11 gui-color-gray">（4选2）</text>
          </view>
          <view class="flex" style="padding: 0 10rpx; box-sizing: border-box">
            <gui-stags
              :checked-class="['gui-bg-primary', 'gui-dark-bg', 'gui-color-white', 'text-center']"
              class="mt10"
              :default-class="['text-center', 'gui-bg-gray', 'gui-dark-bg-level-1', 'gui-primary-text', 'gui-dark-text-level-5']"
              :line-height="3"
              :padding="20"
              :selected-num="2"
              :size="24"
              :tags="[
                { text: '物理', id: '0' },
                { text: '历史', id: '1' },
                { text: '生物', id: '2' },
                { text: '化学', id: '3' },
              ]"
              type="checkbox"
              :width="100"
              @change="change"
            />
          </view>
        </view>
        <view class="flex-column gui-flex1" style="padding: 10rpx; box-sizing: border-box; font-size: 28rpx">
          <text>{{ `共筛选出${29}个专业` }}</text>
          <view class="gui-flex1 relative">
            <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="padding: 10rpx 0">
              <view
                v-for="(item, index) in 12"
                :key="index"
                class="flex-column gap8 mb10"
                style="background-color: white; padding: 20rpx; border-radius: 20rpx"
              >
                <text style="font-size: 36rpx">{{ `临床医学` }}</text>
                <text style="font-size: 24rpx; color: #aaaaaa">{{ `专业类别：本科-医学-临床医学类` }}</text>
                <text style="font-size: 24rpx; color: #aaaaaa">{{ `专业年限：五年` }}</text>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.subject-head {
  width: 100%;
  height: 60rpx;

  box-sizing: border-box;
  font-size: 32rpx;
  color: #537bb6;
  font-weight: 600;
}

.college-logo-box {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.college-logo-box image {
  width: 120rpx;
  height: 120rpx;
  background-color: aliceblue;
  border-radius: 50%;
}

.subject-tag {
  margin-top: 20rpx;
}

.subject-class {
  margin-right: 10rpx;
}

.subject-class-first {
  margin-left: 10rpx;
}

.subject-info-box {
  margin-top: 40rpx;
  padding: 10rpx 30rpx;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.subject-info-item {
  width: 40%;
}

.info-box {
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
</style>
